if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
console.log('threemainjs')
var container, stats;
var camera, scene, renderer, composer;
var uniforms;
var beta=0;
var gamma=0;
var arr_loader=[];
var bool_render=true;
var mesh;
function threeInit()
{
    load();
    // animate();
}


function load() {
    var manager = new THREE.LoadingManager();
    for(var i=0;i<1;i++)
    {
        arr_loader[i]=new THREE.TextureLoader(manager).load(i.toString()+'.jpg');
        arr_loader[i].magfilter=THREE.NearestMipMapLinearFilter;
        arr_loader[i].antialias=16;
    }
    console.log(manager)
    manager.onProgress = function ( item, loaded, total ) {
        console.log(item, loaded, total);
        if (loaded == total) {
            init();
        }
    }
}

function init() {
    container = document.getElementById( 'container' );

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 3000 );
    // camera.aspect =window.innerWidth / window.innerHeight;
    camera.position.z = 350;

    scene = new THREE.Scene();

    var geometry = new THREE.PlaneBufferGeometry( 1100, 1100 );

    uniforms = {
        time:       { value: 1.0 },
        resolution: { value: new THREE.Vector2() },
        iChannel0:    {type: 't', value:arr_loader[0] },
        angle:{value:0.0}
    };
    var material = new THREE.ShaderMaterial( {
        uniforms: uniforms,
        vertexShader: document.getElementById( 'vertexShader' ).textContent,
        fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
        side:THREE.DoubleSide
    } );
    console.log(material.uniforms)
    material.uniforms.iChannel0.value.wrapS = uniforms.iChannel0.value.wrapT = THREE.RepeatWrapping;

    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );
   

    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio( window.devicePixelRatio );
    container.appendChild( renderer.domElement );


    onWindowResize();

    window.addEventListener( 'resize', onWindowResize, false );
    window.addEventListener('deviceorientation', function(e){
        console.log('absolute: ' + e.absolute)
        console.log('alpha: ' + e.alpha)
        console.log('beta: ' + e.beta);
        beta=(e.beta)/2000;
        gamma=(e.gamma-25)/2200;
        console.log('gamma: ' + e.gamma)
    });
    animate();
}

function onWindowResize( event ) {
    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 3000 );
    camera.position.z = 350;
    // camera.aspect =window.innerWidth / window.innerHeight;
  renderer.setSize( window.innerWidth, window.innerHeight );

}
function threeOut()
{
    // console.log('out');
    // tw1=new TWEEN.Tween({opacity:1})
    //             .to({opacity:0},1000)
    //             .easing(TWEEN.Easing.Cubic.InOut)
    //             .onUpdate(function(){
    //                  mesh.material.opacity=opacity;
    //             })
    //             .start();
                setTimeout(function()
                {
                    bool_render=false;
                     scene.remove(mesh)
                },2000)
               
   
}
function animate() {
    if(bool_render)
    {
        requestAnimationFrame( animate );
        render();
    }
    
//				stats.update();
}

function render() {
    console.log('render')
    uniforms.resolution.value.x = 1;
    uniforms.resolution.value.y = 1;
    if(0.01+beta>0.1)
    {
        uniforms.time.value+=0.1
    }
    else if(0.01+beta<-0.1)
    {
        uniforms.time.value+=-0.1
    }
    else
    {
        uniforms.time.value += (0.005+gamma);
    }
    uniforms.angle.value+=beta;

    renderer.render( scene, camera );
}
function addListener()
{

}